<!-- 字典数据 -->
<template>
  <div class="app-container drawer-container">
    <div class="block">
      <span class="setting">
        <!-- <el-button
          type="danger"
          class="mr-[20px] pl-[20px!important] pr-[20px!important] h-[24px!important]"
        >
          <i-ep-setting class="mr-[2px] text-size-[11px] v-bottom" />设置报警值
        </el-button> -->
        <!-- <el-button-group>
          <el-button type="primary" size="small">卡片展示</el-button>
          <el-button type="" size="small"> 列表展示 </el-button>
        </el-button-group> -->
        <sub class="ml-[20px] color-[#999] font-[12px] v-bottom">时间：</sub>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          size="small"
          class="w-[180px!important]"
        />
      </span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="压力" name="ssgk" />
        <el-tab-pane label="温度" name="ssbk" />
        <el-tab-pane label="电池电量" name="wd" />
        <el-tab-pane label="信号强度" name="ya" />
      </el-tabs>

      <!-- <component :is="chartComponent('charts')" id="charts" class="mt-[20px]" /> -->
      <echart id="charts" style="height: 400px; width: 100%"></echart>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DictData",
  inheritAttrs: false,
});
import echart from "./charts.vue";
const activeName = ref("ssgk");
const props = defineProps({
  typeCode: {
    type: String,
    default: () => {
      return "";
    },
  },
  typeName: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./${item}.vue`));
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.drawer-container {
  background: transparent;

  .setting {
    position: absolute;
    top: 26px;
    right: 20px;
    z-index: 10;
  }

  .block {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;

    .title {
      padding-bottom: 10px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px dashed #eee;
    }

    :deep .el-form {
      .el-form-item {
        width: 100%;

        .el-form-item__label {
          font-size: 12px !important;
        }
      }
    }
  }
}
</style>
